<template>
  <div class="history-list__wrapper">
    <div
      class="list__content"
      v-loading="loading"
      v-infinite-scroll="() => getHistoryListByPage()"
      :infinite-scroll-disabled="disabled"
      :infinite-scroll-distance="40"
    >
      <div class="list-sub" v-for="item in listData" :key="item.date">
        <div class="sub-time">{{ item.dateLocal }}</div>
        <list-item
          v-for="subItem in item.list"
          :key="subItem.conversation_id"
          :item="subItem"
          @click-item="handleListItemClick"
        ></list-item>
      </div>
      <div class="list__empty fs-c-5" v-show="!loading && listData.length === 0">
        {{ historyStore.activeType === 'favorites' ? '暂无收藏记录' : '暂无历史记录' }}
      </div>
    </div>
    <el-dialog
      :visible.sync="historyStore.editItem.show"
      title="编辑标题"
      @close="handleEditClose"
      width="300"
      :close-on-click-modal="false"
      :append-to-body="true"
      :fullscreen="true"
      :modal="true"
    >
      <div class="history__edit">
        <textarea
          ref="refEditInput"
          :value="historyStore.editItem.content"
          @input="handleInputChange"
          maxlength="100"
        ></textarea>
        <div class="edit__count fs-c-5">{{ historyStore.editItem.content.length }}/100</div>
      </div>
      <div class="history__edit-footer">
        <el-button @click="handleEditClose">取消</el-button>
        <el-button type="primary" @click="handleSaveEdit" :disabled="isDisabled">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ListItem from './list-item.vue'
import { updateConversation } from '@/api/chat'
export default {
  name: 'HistoryList',
  components: {
    ListItem
  },
  inject: ['setHistoryMessage'], // 接收一个方法
  data () {
    return {
      loading: true,
      pageNumber: 1,
      isEnd: false,
      opts: {}
    }
  },
  computed: {
    ...mapGetters(['historyStore']),
    isDisabled () { return !this.historyStore.editItem.content.trim() },
    listData () { return this.historyStore[this.historyStore.activeType] },
    disabled () {
      return this.loading || this.isEnd
    }
  },
  created () {
  },
  mounted () {
    this.initListPage()
  },
  methods: {
    async getHistoryListByPage () {
      const { end, err } = await this.$store.dispatch('history/getHistoryAll', { ...(this.opts || {}), page: this.pageNumber + 1 })
      // console.log('end', end)
      // console.log('err', err)
      if (!err) this.pageNumber++
      if (end) this.isEnd = true
    },

    async initListPage (opts) {
      this.loading = true
      this.pageNumber = 1
      this.isEnd = false
      this.opts = {
        conversation_type: this.opts.conversation_type,
        ...opts
      }
      await this.$store.dispatch('history/getHistoryAll', { ...(this.opts || {}), page: this.pageNumber })
      this.loading = false
    },
    setEditItemSellection () {
      // 选择textarea里面的内容文字
      setTimeout(() => {
        this.$refs.refEditInput.focus()
        this.$refs.refEditInput.select()
      }, 300)
    },
    handleInputChange (e) {
      this.historyStore.editItem.content = e.target.value
    },
    // 保存
    async handleSaveEdit () {
      if (this.isDisabled) return
      const { content, item } = this.historyStore.editItem
      const { data } = await updateConversation(item.conversation_id, content)
      if (data?.code === 200) {
        this.$PsMessage({ message: '编辑成功' })
        item.title = content
        this.$store.dispatch('history/updateEditItem', { id: item.conversation_id, content })
        this.handleEditClose()
        return
      }
      this.$PsMessage({ message: '编辑失败, 请稍后再试' })
    },
    handleEditClose () {
      this.$store.dispatch('history/hideEditItem')
    },

    async handleListItemClick (item) {
      this.loading = true
      await this.setHistoryMessage(item)
      this.loading = false
      this.$store.dispatch('history/setStatus', false)
    }
  },
  /** 列表编辑 */
  watch: {
    'historyStore.editItem.show' (v) {
      if (v) {
        this.setEditItemSellection()
      }
    },
    'historyStore.show' (v) {
      if (v) {
        this.initListPage()
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.history-list__wrapper {
  flex: 1 1 100%;
  padding: 0 15px;
  margin-top: 13px;
  overflow: hidden;
}
.list__content {
  // max-height: calc(100vh - 300px);
  height: 100%;
  overflow: auto;
}
.list-sub {
  margin-bottom: 10px;
}
.list__empty {
  padding: 40px 0;
  display: flex;
  justify-content: center;
  // line-height: 1;
}
.sub-time {
  color: $color-primary;
  font-size: $font-size-base;
  padding-left: 14px;
  margin-bottom: 4px;
}
.history__edit {
  overflow: hidden;
  position: relative;
  textarea {
    width: 100%;
    border: 1px solid $border-color-primary;
    border-radius: $border-radius;
    height: 90px;
    box-sizing: border-box;
    resize: none;
    outline: none;
    padding: 10px;
  }
  .edit__count {
    position: absolute;
    bottom: 6px;
    right: 10px;
  }
}
.history__edit-footer {
  padding: 15px 15px 0 15px;
  gap: 20px;
  .el-button--default {
    color: #333;
    border: 1px solid #c7c7c7;
  }
  .el-button--primary {
    background: $color-primary;
    border: 0px
  }
}
</style>
